<script>
/**
 * 选择地区
 */
import { baseUtil } from '@health/utils';
const { isEmptyObj } = baseUtil;

export default {
  name: 'FieldItemArea',
  props: {
    propItem: Object,
  },
  data() {
    return {
      showArea: false,
      areaList: {
        province_list: {},
        city_list: {},
        county_list: {},
      },
      innerValue: '',
      value: '',
      ...this.propItem,
    };
  },
  created() {
    this.getArea('', 'province_list');
  },
  mounted() {},
  methods: {
    directionalJump() {
      this.areaList = {
        ...this.areaList,
        city_list: {},
        county_list: {},
      };
      this.value = '440000';
      this.getArea(this.value, 'city_list');
    },
    async getArea(areaId, areaLevel) {
      if (areaId === '900000') return; // 钓鱼岛没有下级地区
      const arealist = await this.$$lvtongApis
        .getAreaList(areaId)({ loading: true })
        .then(({ data }) => data || []);
      if (isEmptyObj(arealist)) return;
      const areaObj = {};
      arealist.forEach((item) => {
        areaObj[item.areaId] = item.name;
      });

      if (!isEmptyObj(this.areaList.city_list) && areaLevel === 'county_list') {
        // 区县级目录添加 全部 选项
        const str = areaId.toString().slice(0, 4);
        areaObj[str + '00'] = '全部';
      }
      this.areaList[areaLevel] = areaObj;
      if (isEmptyObj(this.areaList.city_list)) {
        this.getArea(arealist[0].areaId, 'city_list');
      } else if (isEmptyObj(this.areaList.county_list)) {
        this.getArea(arealist[0].areaId, 'county_list');
      }
    },
    changeArea(picker, area) {
      if (isEmptyObj(area[1])) {
        this.areaList.county_list = {};
        this.getArea(area[0].code, 'city_list');
      } else if (isEmptyObj(area[2])) {
        this.getArea(area[1].code, 'county_list');
      }
    },
    onConfirm(area) {
      const effectArea = area.filter((item) => item);
      if (effectArea.length < 3 && effectArea[0].code !== '900000') return;
      const areaStr = effectArea.reduce((previousValue, currentValue) => previousValue + '/' + currentValue.name, '');
      this.innerValue = areaStr.slice(1);
      const value = {
        provinceId: effectArea[0].code,
        cityId: effectArea[1]?.code || '',
        districtId: effectArea[2]?.code || '',
      };
      if (value.districtId.endsWith('00')) {
        value.districtId = '';
      }
      this.$emit('accept', { value, code: this.code });
      this.showArea = false;
    },
  },
  render() {
    return (
      <div>
        <van-field
          readonly
          clickable
          is-link
          value={this.innerValue}
          label={this.label}
          placeholder={this.placeholder}
          onClick={() => (this.showArea = true)}
        />
        <van-popup v-model={this.showArea} position="bottom">
          <div class="chooseArea">
            <van-area
              area-list={this.areaList}
              value={this.value}
              item-height="45"
              onChange={this.changeArea}
              onConfirm={this.onConfirm}
              onCancel={() => (this.showArea = false)}
            >
              <div class="pl-8" slot="columns-top">
                <p class="font-weight-bold font-lg">热门地区</p>
                <p class="hotArea__item mt-3 mb-5 rounded-xl primary--text" onClick={this.directionalJump}>
                  广东省
                </p>
                <p class="font-weight-bold font-lg">选择地区</p>
              </div>
            </van-area>
          </div>
        </van-popup>
      </div>
    );
  },
};
</script>
<style scoped lang="less">
.hotArea__item {
  width: 66px;
  height: 24px;
  background: @primary-lighter-color;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
